<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="disaster" class="com.example.asa.Disaster" scope="request"/>

<html>
<head>
  <title>编辑灾情</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    :root {
      --primary-color: #1E40AF;
      --secondary-color: #3B82F6;
      --text-dark: #1F2937;
      --text-light: #6B7280;
      --bg-light: #F9FAFB;
      --bg-white: #FFFFFF;
      --border-color: #E5E7EB;
      --success-color: #10B981;
      --radius: 8px;
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', system-ui, sans-serif;
    }

    body {
      background-color: var(--bg-light);
      color: var(--text-dark);
      padding: 2rem 1rem;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
    }

    .page-header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .page-title {
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--primary-color);
    }

    .form-card {
      background-color: var(--bg-white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 2rem;
    }

    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-label {
      display: block;
      font-weight: 500;
      margin-bottom: 0.5rem;
      color: var(--text-dark);
    }

    .form-control {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      font-size: 1rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--secondary-color);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    }

    .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
      background-position: right 0.75rem center;
      background-repeat: no-repeat;
      background-size: 1em;
    }

    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: var(--radius);
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }

    .btn-primary:hover {
      background-color: #1D4ED8;
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      color: var(--primary-color);
      margin-top: 1.5rem;
      text-decoration: none;
      font-weight: 500;
    }

    .back-link:hover {
      text-decoration: underline;
    }

    .back-link i {
      margin-right: 0.5rem;
    }

    @media (max-width: 480px) {
      .form-card {
        padding: 1.5rem;
      }
    }
  </style>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
  <div class="page-header">
    <h1 class="page-title">编辑灾情信息</h1>
  </div>

  <div class="form-card">
    <form action="updateDisaster" method="post">
      <input type="hidden" name="id" value="${disaster.id}">

      <div class="form-group">
        <label for="name" class="form-label">名称</label>
        <input type="text" id="name" name="name" value="${disaster.name}"
               class="form-control" required>
      </div>

      <div class="form-group">
        <label for="timestamp" class="form-label">时间</label>
        <input type="datetime-local" id="timestamp" name="timestamp"
               value="${disaster.timestamp}" class="form-control" required>
      </div>

      <div class="form-group">
        <label for="location" class="form-label">地点</label>
        <input type="text" id="location" name="location" value="${disaster.location}"
               class="form-control" required>
      </div>

      <div class="form-group">
        <label for="affected_area" class="form-label">影响区域</label>
        <input type="text" id="affected_area" name="affected_area"
               value="${disaster.affectedArea}" class="form-control" required>
      </div>

      <div class="form-group">
        <label for="description" class="form-label">描述</label>
        <textarea id="description" name="description" rows="3"
                  class="form-control" required>${disaster.description}</textarea>
      </div>

      <div class="form-group">
        <label for="status" class="form-label">状态</label>
        <select id="status" name="status" class="form-control form-select" required>
          <option value="预测" ${disaster.status == '预测' ? 'selected' : ''}>预测</option>
          <option value="已发生" ${disaster.status == '已发生' ? 'selected' : ''}>已发生</option>
          <option value="已解决" ${disaster.status == '已解决' ? 'selected' : ''}>已解决</option>
        </select>
      </div>

      <div class="form-group">
        <label for="severity" class="form-label">预警等级</label>
        <input type="text" id="severity" name="severity" value="${disaster.severity}"
               class="form-control" required>
      </div>

      <div class="form-group">
        <label for="contact" class="form-label">联系方式</label>
        <input type="text" id="contact" name="contact" value="${disaster.contact}"
               class="form-control" required>
      </div>

      <button type="submit" class="btn btn-primary">
        <i class="fa fa-save mr-2"></i>保存修改
      </button>
    </form>
  </div>

  <a href="disasterManage.jsp" class="back-link">
    <i class="fa fa-arrow-left"></i> 返回管理页面
  </a>
</div>
</body>
</html>